<!-- 第五步/查看详情 -->
<template>
    <div class="projectViewDrtail">
        <el-tabs type="card">
            <el-tab-pane label="跟投项目信息">
                <div class="info-title first">项目信息</div>
                <ul>
                    <li><span>项目名称：</span>{{projectRow.projectName}}</li>
                    <li><span>所属公司：</span>{{projectRow.companyName}}</li>
                    <li><span>所属城市：</span>{{projectRow.cityName}}</li>
                </ul>
                <div class="info-title ">打款账户信息</div>
                <ul>
                    <li><span>公司：</span>{{projectRow.accountCompanyName}}</li>
                    <li><span>开户名称：</span>{{projectRow.accountName}}</li>
                    <li><span>开户行名称：</span>{{projectRow.openingBank}}</li>
                    <li><span>银行账号：</span>{{projectRow.bankAccount}}</li>
                    <li><span>联行号：</span>{{projectRow.bankNumber}}</li>
                    <li><span>地区代码信息：</span>{{projectRow.bankAreaCode}}</li>
                    <li><span>开户行所属省/市：</span>{{projectRow.openingBankProvince}} {{projectRow.openingBankCity}}</li>

                </ul>
                <div class="info-title ">跟投信息</div>
                <ul>
                    <li><span>申购开始日期：</span>{{projectRow.applyBeginTime ? projectRow.applyBeginTime.split(" ")[0] : ''}}
                    </li>
                    <li><span>申购结束日期：</span>{{projectRow.applyEndTime ? projectRow.applyEndTime.split(" ")[0] : ''}}
                    </li>
                    <li><span>跟投开始日期：</span>{{projectRow.investBeginTime ? projectRow.investBeginTime.split(" ")[0] :
                        ''}}
                    </li>
                    <li><span>跟投结束日期：</span>{{projectRow.investEndTime ? projectRow.investEndTime.split(" ")[0] : ''}}
                    </li>
                    <li><span>预计项目周期（月）：</span>{{projectRow.estimateCycle}}</li>
                    <li><span>收益方式：</span>{{["项目清算后返还"][projectRow.gainsType]}}</li>
                </ul>
                <div class="text-info">
                    <p>跟投方案：</p>
                    <div>
                        {{projectRow.investPlan}}
                    </div>
                </div>
                <div class="text-info">
                    <p>收益说明：</p>
                    <div>
                        {{projectRow.gainsExplain}}
                    </div>
                </div>
                <div class="text-info">
                    <p>申购规则：</p>
                    <div>
                        {{projectRow.applyRule}}
                    </div>
                </div>
            </el-tab-pane>
            <el-tab-pane label="跟投配置信息">
                <div class="info-title first">跟投金额信息</div>
                <ul>
                    <li><span>合作模式：</span>{{["包销模式", "分销模式", "合伙人模式", "加盟模式", "保证金模式"][configInfo.businessMode]}}</li>
                    <li><span>总投入金额：</span>{{configInfo.investTotalMoney}}元</li>
                    <li><span>预测利润率：</span>{{configInfo.projectedProfitMargin}}%</li>
                </ul>
                <div class="info-title ">绑定标准及规则</div>
                <table class="rule-table" border="1" width='100%'>
                    <tr>
                        <td>跟投管控标准</td>
                        <td>跟投分配规则</td>
                        <td>跟投分红规则</td>
                    </tr>
                    <tr>
                        <td v-for="(item, index) in configInfo.projectStandard" :key="index">
                            <el-button type="text" @click="showDialog(index)">{{item.standardName}}</el-button>
                        </td>
                    </tr>
                </table>
                <div class="info-title" v-if="configInfo.ruleType !== 0">募集分配规则</div>
                <ul v-if="configInfo.ruleType !== 0">
                    <li><span>跟投金额：</span>￥{{configInfo.projectRaise.investMoney | formatMoney}}</li>
                    <li><span>募集跟投分配占比：</span>{{configInfo.projectRaise.raiseInvestProportion}}%</li>
                    <li><span>募集跟投分配金额：</span>￥{{configInfo.projectRaise.raiseInvestAmount | formatMoney}}</li>
                    <li><span>跟投份数：</span>{{configInfo.projectRaise.investNum}}份</li>
                    <li><span>最小跟投份数：</span>{{configInfo.projectRaise.minInvestNum}}份,
                        共￥{{configInfo.projectRaise.minInvestMoney | formatMoney}}
                    </li>
                    <li><span>最大跟投份数：</span>{{configInfo.projectRaise.maxInvestNum}}份,
                        共￥{{configInfo.projectRaise.maxInvestMoney | formatMoney}}
                    </li>
                </ul>
                <!--<div class="info-title ">分红结算规则</div>-->
                <!--<scaleTable :tableData="scaleData"></scaleTable>-->
                <div class="info-title" v-if="configInfo.ruleType !== 1">跟投分配方案</div>
                <distriTable :tableData="distriData" v-if="configInfo.ruleType !== 1"></distriTable>
            </el-tab-pane>
        </el-tabs>
        <controlModal :tableData="controlModalData" :visible.sync="controlModalVisible"></controlModal>
        <distriModal :tableData="distriModalData" :visible.sync="distriModalVisible"></distriModal>
        <scaleModal :tableData="scaleModalData" :infobase="scaleModalDataInfoBase" :visible.sync="scaleModalVisible"></scaleModal>
    </div>
</template>
<script>
    import api from '@/api/apiPath'
    import utils from '@/common/utils'

    import controlModal from './common/controlModal'
    import scaleTable from './common/scaleTable'
    import scaleModal from './common/scaleModal'//分红结算区间弹窗
    import distriTable from './common/distriTable'
    import distriModal from './common/distriModal'//跟投分配方案弹窗
    export default {
        components: {
            scaleTable, scaleModal, distriTable, distriModal, controlModal
        },
        props: ['totalData'],
        watch: {
            totalData: {
                handler(newValue) {
                    this.projectRow = newValue.firstStep;
                    this.investId = newValue.investId;
                    this.configInfo = {
                        businessMode: newValue.secondStep.ruleForm2.modeId,
                        investTotalMoney: newValue.secondStep.ruleForm2.totalAmount,
                        projectedProfitMargin: newValue.secondStep.ruleForm2.profitPercent,
                        ruleType: newValue.secondStep.bindStandardInfo[1].type,
                        projectStandard: [
                            {
                                standardName: newValue.secondStep.bindStandardInfo[0].name,
                                standardId: newValue.secondStep.bindStandardInfo[0].id,
                                standardType: 1
                            },
                            {
                                standardName: newValue.secondStep.bindStandardInfo[1].name,
                                standardId: newValue.secondStep.bindStandardInfo[1].id,
                                standardType: 2
                            },
                            {
                                standardName: newValue.secondStep.bindStandardInfo[2].name,
                                standardId: newValue.secondStep.bindStandardInfo[2].id,
                                standardType: 3
                            }
                        ],
                        projectRaise: newValue.secondStep.bindStandardInfo[1].type === 0 ? null :{
                            maxInvestNum: newValue.thirdStep.ruleForm3.maxCount,
                            minInvestNum: newValue.thirdStep.ruleForm3.minCount,
                            investNum: newValue.thirdStep.ruleForm3.count,
                            raiseInvestAmount: newValue.thirdStep.ruleForm3.money2,
                            raiseInvestProportion: newValue.thirdStep.ruleForm3.scale,
                            investMoney: newValue.thirdStep.ruleForm3.money1,
                            maxInvestMoney: (newValue.thirdStep.ruleForm3.money2 / newValue.thirdStep.ruleForm3.count * newValue.thirdStep.ruleForm3.maxCount).toFixed(2),
                            minInvestMoney: (newValue.thirdStep.ruleForm3.money2 / newValue.thirdStep.ruleForm3.count * newValue.thirdStep.ruleForm3.minCount).toFixed(2),
                        }
                    };

                    this.controlModalData = newValue.secondStep.bindStandardInfo[0].moneys;
                    this.get23DialogData(newValue.secondStep.bindStandardInfo[1].id, newValue.secondStep.bindStandardInfo[2].id);
                    this.calcProjectFixedPerson(newValue.fourthStep.projectFixedPersonList, newValue.fourthStep.type);
                    this.generateParams();
                },
                deep: true,
                immediate: false
            }
        },
        data() {
            return {
                investId:'',
                projectRow: {}, //跟投项目信息
                configInfo: {
                    projectRaise: {}
                }, //跟投配置信息

                scaleData: [],//分红结算规则数据
                distriData: [],//跟投分配方案数据


                distriModalData: [],//跟投分配方案弹窗数据
                scaleModalDataInfoBase: "", //分红用的
                scaleModalData: [],//分红结算区间弹窗数据
                controlModalData: [],//跟投管控标准数据
                controlModalVisible: false,//跟投管控标准数据开关
                distriModalVisible: false,//跟投分配方案弹窗开关
                scaleModalVisible: false,//分红结算区间弹窗开关

                projectFixedPersonList: [],
                sendParams: {}
            }
        },
        methods: {
            calcProjectFixedPerson(projectFixedPersonList, type) {
                if (type) {
                    let params = {
                        projectStandard: this.configInfo.projectStandard,
                        projectRaise: this.configInfo.ruleType === 0 ? null : {
                            raiseInvestProportion: this.configInfo.projectRaise.raiseInvestProportion,
                            investMoney: this.configInfo.projectRaise.investMoney,
                        },
                        investTotalMoney: this.configInfo.investTotalMoney,
                        projectedProfitMargin: this.configInfo.projectedProfitMargin,
                        projectFixedPersonList: this.configInfo.ruleType === 1 ? null : projectFixedPersonList
                    };
                    this.axios.post(api.calcProjectFixedPerson, params).then((res) => {
                        this.distriData = res.data.data;
                    })
                }
                this.projectFixedPersonList = projectFixedPersonList
                this.distriData = projectFixedPersonList
            },
            get23DialogData(id2, id3) {
                this.axios.get(api.DISTRIBUTTIONVIEW + id2).then((res) => {
                    if (res.data.code === 200) {
                        this.distriModalData = res.data.data.distributionDetailList
                    }
                });
                this.axios.get(api.INVESTSECTIONS + '/' + id3).then((res) => {
                    if (res.data.code === 200) {
                        this.scaleModalData = res.data.data.shareDateail;
                        this.scaleModalDataInfoBase = res.data.data.shareOut;
                    }
                })
            },
            showDialog(index) {
                let field = ['controlModalVisible', 'distriModalVisible', 'scaleModalVisible'][index]
                this[field] = true;
            },
            generateParams() {
                this.sendParams = {
                    id: this.investId,
                    ...this.projectRow,
                    businessMode: this.configInfo.businessMode,
                    investTotalMoney: this.configInfo.investTotalMoney,
                    projectedProfitMargin: this.configInfo.projectedProfitMargin,
                    ruleType: this.configInfo.ruleType,
                    projectStandard: this.configInfo.projectStandard,
                    projectRaise: this.configInfo.projectRaise,
                    projectFixedPersonList: this.projectFixedPersonList
                };
            }
        },
        created() {

        },

        destroyed() {

        },
        filters: {
            formatMoney(money) {
                return utils.formatMoney(money)
            }

        }
    }

</script>

<style lang="stylus" scoped>
    .projectViewDrtail {
        .info-title {
            padding: 10px 0;
            font-size: 17px;
            font-weight: 700;
            margin-top: 40px;

            &.first {
                margin-top: 0;
            }
        }

        ul {
            padding: 0;
            margin: 0;
            list-style: none;
            display: flex;
            flex-wrap: wrap;
            margin-bottom: 20px;
            padding-bottom: 20px;
            border-bottom: 1px solid #ddd;

            li {
                width: 50%;
                padding: 10px 0;

                span {
                    display: inline-block;
                    width: 160px;
                }

            }
        }
        .rule-table {
            table-layout: fixed;
            border: 1px solid #ebeef5;
            border-collapse: collapse;
            text-align: center;
            font-size: 14px;

            td {
                padding: 12px 10px;
                line-height: 23px;
                word-break: break-all;
            }
            .el-button--text {
                padding: 0;
            }

        }
        .text-info {
            margin-top: 20px;
            display: flex;
            color: #333;
            line-height: 30px;
            > p {
                flex: none;
                width: 100px;
                margin: 0;
                margin-bottom: 10px;
            }
            .text-h3 {
                padding-left: 30px;
            }
        }

    }

</style>
